<template>
  <!-- SelectShowMembers 选择展示成员 -->
  <PageContainer>
    <view class="container">
      <Header title="选择展示成员" :is-box-shadow="false" />
      <Paglist v-model="dataList" :isInitApi="false" :size="20" @register="register">
        <template>
          <Box v-if="dataList[0]" title="负责人" title-btn="添加成员" @title-btn-click="addMembers">
            <view class="member-item">
              <view class="member-item_info">
                <view class="avatar">
                  <TImage
                    :src="dataList[0].avatar"
                    width="115rpx"
                    height="115rpx"
                    error-img-type="person"
                  />
                </view>
                <view class="info-text">
                  <view class="name">{{ dataList[0].name }}</view>
                  <view>{{ dataList[0].socialPosition }}</view>
                </view>
              </view>
              <view class="select-btn">
                <image
                  class="select-icon"
                  src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/selected-icon.png"
                  mode="scaleToFill"
                />
                <text>展示成员</text>
              </view>
            </view>
          </Box>
          <Box v-if="dataList.length > 1" title="成员">
            <template v-for="(v, i) in dataList" :key="v.id">
              <view v-if="i !== 0" class="member-item">
                <view class="member-item_info">
                  <view class="avatar">
                    <TImage
                      :src="v.avatar"
                      width="115rpx"
                      height="115rpx"
                      error-img-type="person"
                    />
                  </view>
                  <view class="info-text">
                    <view class="name text-overflow-1">{{ v.name }}</view>
                    <view>{{ v.socialPosition }}</view>
                  </view>
                </view>
                <view class="select-btn" @click="handleSelect(v)">
                  <image
                    v-if="hasSelected(v.id)"
                    class="select-icon"
                    src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/selected-icon.png"
                    mode="scaleToFill"
                  />
                  <image
                    v-else
                    class="select-icon"
                    src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/select-icon.png"
                    mode="scaleToFill"
                  />
                  <text>展示成员</text>
                </view>
              </view>
            </template>
          </Box>
        </template>
      </Paglist>

      <TButtonGroup>
        <TButton class="gutter-btn" text="保存" custom-class="cardBtn" @click="submit" />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  SelectShowMembers  选择展示成员 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import { pageLeadingList } from '@/api/mine';
  import { type IMemberItem } from '@/api/mine/types';
  import Header from '@/components/Header/index.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { ref, provide, unref } from 'vue';
  import Box from '../components/box/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import { navigateBack, navigateTo, onLoad } from '@/router';
  import { type SelectShowMembers } from '@/router/types/modules';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { leadingMemberList } from '@/api/admin';
  import { isAdminSubpackage } from '@/utils/is';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';

  const useUser = useUserStoreWithOut();

  let callback: SelectShowMembers['submit'];

  provide('api', (obj: any) => {
    return useUser.userInfo.sysUserId && isAdminSubpackage()
      ? leadingMemberList({ ...obj, cocId: unref(cocId) })
      : pageLeadingList(obj);
  });

  const dataList = ref<IMemberItem[]>([]);
  const selected = ref<IMemberItem[]>([]);
  const cocId = ref<number>();
  const [register, { refresh }] = useConList();

  function handleSelect(item: IMemberItem) {
    const index = selected.value.findIndex((v) => v.id === item.id);
    index === -1 ? selected.value.push(item) : selected.value.splice(index, 1);
  }

  function hasSelected(id: number) {
    return selected.value.find((v) => v.id === id);
  }

  function addMembers() {
    if (useUser.userInfo.sysUserId && isAdminSubpackage() && cocId.value) {
      return navigateTo({
        name: 'personAdd',
        options: {
          cocId: cocId.value,
          callback: () => refresh?.(),
        },
      });
    }
    navigateTo({
      name: 'membershipEdit',
      options: {
        callback: () => {
          refresh?.();
        },
      },
    });
  }

  function submit() {
    callback?.(selected.value);
    navigateBack();
  }

  onLoad<'SelectShowMembers'>((op) => {
    cocId.value = op.cocId;
    selected.value = op.selectedMembers || [];
    callback = op.submit;
    refresh?.();
  });

  provide('tabIsShow', false);
</script>

<style lang="scss" scoped>
  .container {
    .member-item {
      height: 115rpx;
      border-top: 1px solid #dddddd;
      padding: 30rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &_info {
        display: flex;
        align-items: center;
        .avatar {
          width: 115rpx;
          height: 115rpx;
          border-radius: 10rpx;
          flex-shrink: 0;
          margin-right: 25rpx;
          overflow: hidden;
        }
        .info-text {
          color: #333;
          font-size: 24rpx;
          .name {
            font-size: 27rpx;
            font-weight: bolder;
            margin-bottom: 6rpx;
          }
        }
      }
      .select-btn {
        height: inherit;
        display: flex;
        align-items: center;
        color: #333;
        font-size: 24rpx;
        flex-shrink: 0;
        .select-icon {
          width: 32rpx;
          height: 32rpx;
          margin-right: 12rpx;
        }
      }
    }
  }
</style>
